<style>
@media screen and (max-width:359px) and (min-width:320px) {
    html,body{
        font-size: 77.29px !important;
    }
}

@media screen and (max-width:374px) and (min-width:360px) {
    html,body{
        font-size: 86.95px !important;
    }
}

@media screen and (max-width:413px) and (min-width:375px) {
   html,body{
        font-size: 90.57px !important;
    }
}

@media screen and (max-width:639px)  and (min-width:414px){
   html,body{
        font-size: 100px !important;
    }
}

@media screen and (min-width:640px) {
   html,body{
        font-size: 154px !important;
    }
}

body,html{
  margin:0px;
  padding:0px;
  background-color: #F1F1F1;
}

ul{
  margin:0px;
  padding:0px;
  list-style: none;
}

p{
  margin:0px;
  padding:0px;
}

.cb{
  clear: both;
}

#app {
  width:calc( 100vw );
  height:calc( 100vh );
}

#page{
  height:calc( 100vh - .6rem);
  position: relative;
  overflow: auto;
}

/* tab */
.tabbar {
  height: 0.59rem;
  border-top:.01rem solid #D3D3D3;
}

.tabbar a{
  width:20%;
  height: 0.59rem;
  display: block;
  float: left;
  text-decoration: none;
}

.tabbar a.active p {
  color:#469FE3;
}

.tabbar a div{
  width:.25rem;
  height: 0.25rem;
  margin:.076rem auto 0rem auto;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: auto .25rem;
}

.tabbar a p{
  color:#676767;
  text-align: center;
  font-size:.14rem;
}
</style>


<template>
  <div id="app">
    <div id="page">
      <router-view></router-view>
    </div>
    <div class="tabbar">
      <a href="javascript:;" v-for="(item,index) in tabs" :key="index" :class="{active:(index===active)}" @click="tourl(index)">
        <div :style="{'background-image':'url(/static/zwk/'+item.active+')'}" v-show="index===active"></div>
        <div :style="{'background-image':'url(/static/zwk/'+item.img+')'}" v-show="index!==active"></div>
        <p>{{item.text}}</p>
      </a>
      <div class="cb"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      active: 0,
      tabs: [{
        text: '首页',
        img: 'huidianpujie@2x.png',
        active: 'dianpujie-@2x.png',
        url: '/'
      }, {
        text: '生活圈',
        img: 'huishenghuoquan@2x.png',
        active: 'shenghuoquan@2x.png',
        url: '/sh'
      }, {
        text: '朋友圈',
        img: 'huipengyouquan@2x.png',
        active: 'pengyouquan@2x.png',
        url: '/py'
      }, {
        text: '赚钱',
        img: 'huizhuanqian@2x.png',
        active: 'zhuanqian@2x.png',
        url: '/zq'
      }, {
        text: '我的',
        img: 'huigeren@2x.png',
        active: 'geren@2x.png',
        url: '/my'
      }]
    }
  },
  methods: {
    tourl (index) {
      this.active = index
      this.$router.push({path: this.tabs[index].url})
    }
  }
}
</script>
